<template>
  <div class="main-flight-search">
    <!-- 页面头部 -->
    <div class="page-header">
      <div class="header-content">
        <h1 class="page-title">
          航班搜索系统
        </h1>
      </div>
    </div>

    <!-- 搜索类型切换 - 改进版 -->
    <div class="search-type-container">
      <el-card class="type-switch-card" shadow="never">
        <div class="trip-type-selector">
          <div class="selector-header">
            <h3 class="selector-title">选择行程类型</h3>
            <p class="selector-subtitle">Choose your trip type</p>
          </div>

          <div class="trip-options">
            <div
                class="trip-option"
                :class="{ 'active': currentTripType === 'oneway' }"
                @click="onTripTypeChange('oneway')">
              <div class="option-icon">
                <el-icon size="28"><ArrowRight /></el-icon>
              </div>
              <div class="option-content">
                <h4 class="option-title">单程</h4>
                <p class="option-subtitle">One Way</p>
                <p class="option-description">单向行程，不返回</p>
              </div>
              <div class="option-check" v-if="currentTripType === 'oneway'">
                <el-icon size="20"><Check /></el-icon>
              </div>
            </div>

            <div
                class="trip-option"
                :class="{ 'active': currentTripType === 'roundtrip' }"
                @click="onTripTypeChange('roundtrip')">
              <div class="option-icon">
                <el-icon size="28"><Switch /></el-icon>
              </div>
              <div class="option-content">
                <h4 class="option-title">往返</h4>
                <p class="option-subtitle">Round Trip</p>
                <p class="option-description">来回往返行程</p>
              </div>
              <div class="option-check" v-if="currentTripType === 'roundtrip'">
                <el-icon size="20"><Check /></el-icon>
              </div>
            </div>
          </div>
        </div>

        <!-- 快速搜索提示 -->
        <div class="quick-search-tips" v-if="!hasSearched">
          <div class="tips-content">
            <el-icon class="tips-icon"><InfoFilled /></el-icon>
            <div class="tips-text">
              <p class="tips-title">快速开始搜索</p>
              <p class="tips-desc">
                选择{{ currentTripType === 'oneway' ? '单程' : '往返' }}机票，
                填写出发地、目的地和日期信息，即可开始搜索
              </p>
            </div>
          </div>
        </div>
      </el-card>
    </div>

    <!-- 搜索组件内容 -->
    <div class="search-content">
      <Transition name="fade-slide" mode="out-in">
        <OneWayFlightSearch
            v-if="currentTripType === 'oneway'"
            key="oneway"
            :initial-data="searchData"
            @search-completed="onSearchCompleted"
            @search-started="onSearchStarted" />
        <RoundTripFlightSearch
            v-else-if="currentTripType === 'roundtrip'"
            key="roundtrip"
            :initial-data="searchData"
            @search-completed="onSearchCompleted"
            @search-started="onSearchStarted" />
      </Transition>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import {
  Switch,
  InfoFilled,
  ArrowRight,
  Check
} from '@element-plus/icons-vue'
import OneWayFlightSearch from '@/components/OneWayFlightSearch.vue'
import RoundTripFlightSearch from '@/components/RoundTripFlightSearch.vue'

// 路由
const route = useRoute()
const router = useRouter()

// 响应式数据
const currentTripType = ref('oneway')
const searchData = reactive({})
const hasSearched = ref(false)

// 方法
const onTripTypeChange = (type) => {
  currentTripType.value = type
}

const onSearchStarted = () => {
  hasSearched.value = true
}

const onSearchCompleted = (searchRequest) => {
  hasSearched.value = true
}

// 生命周期
onMounted(() => {
  // 从URL参数初始化
  const tripType = route.query.tripType
  if (tripType && ['oneway', 'roundtrip'].includes(tripType)) {
    currentTripType.value = tripType
  }

  // 如果有URL参数，预填搜索表单
  if (route.query.departure) {
    Object.assign(searchData, {
      departure: route.query.departure,
      destination: route.query.destination,
      departDate: route.query.departDate,
      returnDate: route.query.returnDate,
      adults: parseInt(route.query.adults) || 1,
      children: parseInt(route.query.children) || 0,
      infants: parseInt(route.query.infants) || 0
    })
  }
})
</script>

<style scoped>
.main-flight-search {
  min-height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  padding: 20px;
}

.page-header {
  margin-bottom: 30px;
}

.header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 1400px;
  margin: 0 auto;
}

.page-title {
  display: flex;
  align-items: center;
  gap: 12px;
  color: white;
  font-size: 28px;
  font-weight: bold;
  margin: 0;
}

.search-type-container {
  max-width: 1400px;
  margin: 0 auto 30px;
}

.type-switch-card {
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(10px);
  border: none;
  border-radius: 20px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.trip-type-selector {
  padding: 32px;
}

.selector-header {
  text-align: center;
  margin-bottom: 32px;
}

.selector-title {
  font-size: 24px;
  font-weight: bold;
  color: #2c3e50;
  margin: 0 0 8px 0;
}

.selector-subtitle {
  font-size: 14px;
  color: #7f8c8d;
  margin: 0;
}

.trip-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  max-width: 600px;
  margin: 0 auto;
}

.trip-option {
  position: relative;
  display: flex;
  align-items: center;
  padding: 24px 20px;
  background: #f8f9fa;
  border: 2px solid #e9ecef;
  border-radius: 16px;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
}

.trip-option::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, #667eea, #764ba2);
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 0;
}

.trip-option:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
  border-color: #c3d4f4;
}

.trip-option.active {
  border-color: #667eea;
  background: white;
  box-shadow: 0 8px 30px rgba(102, 126, 234, 0.2);
}

.trip-option.active::before {
  opacity: 0.05;
}

.option-icon {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  background: linear-gradient(135deg, #667eea, #764ba2);
  border-radius: 50%;
  color: white;
  margin-right: 16px;
  flex-shrink: 0;
  transition: all 0.3s ease;
}

.trip-option.active .option-icon {
  background: linear-gradient(135deg, #667eea, #764ba2);
  transform: scale(1.1);
}

.option-content {
  position: relative;
  z-index: 1;
  flex: 1;
}

.option-title {
  font-size: 18px;
  font-weight: bold;
  color: #2c3e50;
  margin: 0 0 4px 0;
  transition: color 0.3s ease;
}

.option-subtitle {
  font-size: 14px;
  color: #667eea;
  margin: 0 0 8px 0;
  font-weight: 500;
}

.option-description {
  font-size: 12px;
  color: #7f8c8d;
  margin: 0;
  line-height: 1.4;
}

.trip-option.active .option-title {
  color: #667eea;
}

.option-check {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: #667eea;
  border-radius: 50%;
  color: white;
  margin-left: 12px;
  animation: bounceIn 0.5s ease;
}

@keyframes bounceIn {
  0% {
    transform: scale(0);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}

.quick-search-tips {
  padding: 24px 32px;
  background: linear-gradient(135deg, #f8f9ff, #e8f0ff);
  border-top: 1px solid #e3e8f7;
  margin: 0 -32px -32px -32px;
}

.tips-content {
  display: flex;
  align-items: center;
  gap: 16px;
  max-width: 600px;
  margin: 0 auto;
}

.tips-icon {
  font-size: 24px;
  color: #667eea;
  flex-shrink: 0;
}

.tips-text {
  flex: 1;
}

.tips-title {
  font-size: 16px;
  font-weight: bold;
  color: #2c3e50;
  margin: 0 0 6px 0;
}

.tips-desc {
  font-size: 14px;
  color: #5a6c7d;
  margin: 0;
  line-height: 1.5;
}

.search-content {
  max-width: 1400px;
  margin: 0 auto;
}

/* 过渡动画 */
.fade-slide-enter-active,
.fade-slide-leave-active {
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.fade-slide-enter-from {
  opacity: 0;
  transform: translateX(20px);
}

.fade-slide-leave-to {
  opacity: 0;
  transform: translateX(-20px);
}

/* 响应式设计 */
@media (max-width: 768px) {
  .main-flight-search {
    padding: 15px;
  }

  .header-content {
    flex-direction: column;
    gap: 16px;
    text-align: center;
  }

  .page-title {
    font-size: 24px;
  }

  .trip-type-selector {
    padding: 24px 20px;
  }

  .selector-title {
    font-size: 20px;
  }

  .trip-options {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .trip-option {
    padding: 20px 16px;
  }

  .option-icon {
    width: 50px;
    height: 50px;
    margin-right: 12px;
  }

  .option-title {
    font-size: 16px;
  }

  .quick-search-tips {
    padding: 20px;
    margin: 0 -20px -24px -20px;
  }

  .tips-content {
    gap: 12px;
  }
}

@media (max-width: 480px) {
  .trip-option {
    flex-direction: column;
    text-align: center;
    gap: 16px;
  }

  .option-icon {
    margin-right: 0;
  }

  .option-check {
    margin-left: 0;
    position: absolute;
    top: 16px;
    right: 16px;
  }
}

/* 卡片悬停效果 */
.type-switch-card {
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.type-switch-card:hover {
  box-shadow: 0 15px 50px rgba(0, 0, 0, 0.15);
  transform: translateY(-3px);
}
</style>